<!--
!1、v-slot 是 Vue 3 提供的标准指令，用于绑定插槽
!2、#是 v-slot 的简写形式，常用在模版中
  v-slot:header 等价于 #header。
!3、#default 表示为默认插槽提供内容（子组件没有 name 的插槽）
-->
<template>
  <div id="wrap">
    <h1>插槽slot案例</h1>
    <!-- !SonDemo15:根据iszhendao的值，动态渲染不同内容-->
    <div class="group">
      <SonDemo15 class="group3" :iszhendao="4"></SonDemo15>
    </div>

    <!-- !SonDemo16:使用默认插槽展示父组件传入的内容，支持嵌套组件-->
    <div class="group">
      <SonDemo16 class="group3"></SonDemo16>
      <!--  ?渲染作用域:插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的 -->
      <SonDemo16 class="group3">
        <button @click="num++">{{ num }}</button>
        <SonDemo15 class="group3" :iszhendao="2"></SonDemo15>
      </SonDemo16>
    </div>

    <!-- !SonDemo17:支持具名插槽和动态具名插槽，适合用于布局复杂的内容-->
    <div class="group">
      <SonDemo17 class="group3">
        <template #header>
          <div>new header</div>
        </template>
        <template #default>
          <!--?#default 表示为默认插槽提供内容（子组件没有 name 的插槽）： 父组件的默认值 -->
          <div>new main</div>
        </template>
        <template #footer>
          <div>new footer</div>
        </template>
      </SonDemo17>
      <SonDemo17>
        <template #[FatherName]>我是奶香的一把刀</template>
        <button @click="editDynamicSlotName">修改动态的具名插槽</button>
      </SonDemo17>
    </div>

    <!-- !SonDemo18:使用作用域插槽，将子组件的 msg 和 title 数据暴露给父组件动态使用-->
    <div class="group">
      <SonDemo18 class="group3">
        <template #default="{ msg: smsg }">
          <div>new main {{ smsg }}</div>
        </template>
        <template #header="{ title, msg: sssmsg }">
          <div>new header{{ `${title}${sssmsg}` }}</div>
        </template>
        <template #footer>
          <div>new footer</div>
        </template>
      </SonDemo18>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo44',
};
</script>

<script lang="ts" setup>
import { ref } from 'vue';
import SonDemo15 from './components/SonDemo15.vue';
import SonDemo16 from './components/SonDemo16.vue';
import SonDemo17 from './components/SonDemo17.vue';
import SonDemo18 from './components/SonDemo18.vue';

//SonDemo16响应式变量
const num = ref(0);

// SonDemo17动态具名插槽的名称
const FatherName = ref('');
const editDynamicSlotName = () => {
  FatherName.value = 'dynamicSlotName';
};
</script>

<style lang="scss" scoped>
.group {
  border: 3px solid rgb(37, 114, 192);
  margin: 10px;
  padding: 10px;
}

.group3 {
  border: 2px solid rgb(199, 64, 147);
  margin: 10px;
  padding: 10px;
}
</style>
